<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.js"></script>
		<style type="text/css">
			div{
				font-size: 30px;
				
			}
		</style>
	</head>
	<body>
		<div>你敢点击我试试！！！！</div>
		
	</body>
	<script>

$.extend({
	popUp:function(str){
		$('body').append("<div class='active'>"+str+"</div>")
		$('.active').css({'width':'500px','height':'500px','background':'lightblue',
		'top':'calc(50% - 250px)','left':'calc(50% - 250px)','position':'relative','fontSize':'20px'})
		$('.active').append("<img src='chahao.png' class='slideout'/>")
		$('.slideout').css({'position':'absolute','right':'0'})
		$('.slideout').click(function(){
			$('.active').hide()
		})
		$('.slideout').hover(function(){
			$('.slideout').attr('src','chahao2.png')
		},function(){
			$('.slideout').attr('src','chahao.png')
		})
	}
})
$('div').click(function(){
	$.popUp('啥都没，逗你玩呢！关掉我！')
})
	</script>
</html>
